@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --brand: 249 115 22;
  /* theme('colors.orange.600') */
  --text-1: 30 41 59;
  /* theme('colors.slate.800') */
  --text-2: 51 65 86;
  /* theme('colors.slate.700') */
  --text-3: 71 85 105;
  /* theme('colors.slate.600') */
  --text-4: 100 116 139;
  /* theme('colors.slate.500') */
  --surface: 255 255 255;
  /* theme('colors.white') */
  --surface-1: 248 250 252;
  /* theme('colors.slate.50') */
  --surface-2: 241 245 249;
  /* theme('colors.slate.100') */
  --surface-3: 226 232 240;
  /* theme('colors.slate.200') */
  --surface-4: 203 213 225;
  /* theme('colors.slate.300') */
  --border: #e5e7eb;

  --font-remote: var(--font-remote-sans);

  .shiki,
  .shiki span {
    font-style: normal !important;
    /* 代码块渲染禁止斜体 */
  }

  /* 警告框内局部代码块样式 */
  /* 引用框内局部代码块 */
  /* 表格第一行内局部代码块 */
  /* 表格剩余行内局部代码块 */
  /* 使用后代选择器统一匹配有序列表所有层级的元素 */
  /* 使用后代选择器统一匹配无序列表所有层级的元素 */
  /* 正常段落中的局部代码块 */
  div.not-prose:nth-child(n)>div:nth-child(n)>p:nth-child(n)>code:nth-child(n),
  .prose>blockquote:nth-child(n)>p:nth-child(n)>code:nth-child(n),
  .prose>table:nth-child(n)>thead:nth-child(n)>tr:nth-child(n)>th:nth-child(n)>code:nth-child(n),
  .prose>table:nth-child(n)>tbody:nth-child(n)>tr:nth-child(n)>td:nth-child(n)>code:nth-child(n),
  .prose>p:nth-child(n)>code:nth-child(n),
  details.mdx-components:nth-child(n)>p:nth-child(n)>code:nth-child(n) {
    padding: 0.1em 0.4em;
    border-radius: 6px;
    color: #1f2328;
    background-color: #eff1f5;
    margin: 0;
    white-space: break-spaces;
    font-weight: normal;
    vertical-align: text-bottom;
    position: relative;
    line-height: 22px;
    /* top: 0.1rem; */
  }
}

:root.dark {
  --brand: 226 232 240;
  /* theme('colors.slate.200') */
  --text-1: 248 250 252;
  /* theme('colors.slate.50') */
  --text-2: 241 245 249;
  /* theme('colors.slate.100') */
  --text-3: 226 232 240;
  /* theme('colors.slate.200') */
  --text-4: 203 213 225;
  /* theme('colors.slate.300') */
  --surface: 0 2 18;
  /* #000212 */
  --surface-1: 30 41 59;
  /* theme('colors.slate.800') */
  --surface-2: 51 65 85;
  /* theme('colors.slate.700') */
  --surface-3: 71 85 105;
  /* theme('colors.slate.600') */
  --surface-4: 100 116 139;
  /* theme('colors.slate.500') */

  --border: 51 65 85;
  /* theme('colors.slate.700') */

  /* 深色主题局部代码块样式 */
  .prose :where(code):not( :where([class~='not-prose'], [class~='not-prose'] *))::before {
    content: none;
  }

  .prose :where(code):not( :where([class~='not-prose'], [class~='not-prose'] *))::after {
    content: none;
  }

  /* 警告框内局部代码块样式 */
  /* 引用框内局部代码块 */
  /* 表格第一行内局部代码块 */
  /* 表格剩余行内局部代码块 */
  /* 使用后代选择器统一匹配有序列表所有层级的元素 */
  /* 使用后代选择器统一匹配无序列表所有层级的元素 */
  /* 正常段落中的局部代码块 */
  div.not-prose:nth-child(n)>div:nth-child(n)>p:nth-child(n)>code:nth-child(n),
  .prose>blockquote:nth-child(n)>p:nth-child(n)>code:nth-child(n),
  .prose>table:nth-child(n)>thead:nth-child(n)>tr:nth-child(n)>th:nth-child(n)>code:nth-child(n),
  .prose>table:nth-child(n)>tbody:nth-child(n)>tr:nth-child(n)>td:nth-child(n)>code:nth-child(n),
  .prose>p:nth-child(n)>code:nth-child(n),
  details.mdx-components:nth-child(n)>p:nth-child(n)>code:nth-child(n) {
    padding: 0em 0.3em;
    border-radius: 6px;
    color: #e6edf3;
    background-color: #6e768166;
    /* #5a616566 */
    margin: 0;
    white-space: break-spaces;
    font-weight: normal;
    vertical-align: text-bottom;
    position: relative;
    line-height: 21px;
    /* top: 0.1rem; */
    display: inline flow-root list-item;
  }
}

code::marker {
  color: transparent !important;
}

/* Markdown */
.prose {

  >div>pre,
  >p:has(img) {
    @apply -mx-4 md:-mx-8;
  }
}

/* Tailwind utilities */
@layer utilities {
  @keyframes hello {
    50% {
      transform: translateY(-25%) rotateZ(15deg);
    }
  }

  @keyframes breath {
    to {
      scale: 0.8;
    }
  }

  @keyframes fade-in {
    to {
      opacity: 1;
    }
  }

  @keyframes fade-out {
    to {
      opacity: 0;
    }
  }

  .animation-hello {
    animation: hello 3s infinite ease;
  }

  .animation-fade-in {
    animation: fade-in 0.5s ease forwards;
  }

  .animation-fade-out {
    animation: fade-out 0.5s ease forwards;
  }

  .animation-breath {
    animation: breath ease 2s alternate infinite;
  }
}

/* 隐藏引用块的引号 */
.prose :where(blockquote p:first-of-type):not( :where([class~='not-prose'], [class~='not-prose'] *))::before {
  content: no-open-quote;
}

.prose :where(blockquote p:last-of-type):not( :where([class~='not-prose'], [class~='not-prose'] *))::after {
  content: no-close-quote;
}

/* 固定文章的目录且可滚动 */
.sticky-table {
  max-height: 90.5vh;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
}

/* webkit内核浏览器样式 */
.sticky-table::-webkit-scrollbar {
  width: 4px;
  -webkit-overflow-scrolling: touch;
}

.sticky-table::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: gray;
}

.sticky-table::-webkit-scrollbar-track {
  border-radius: 0;
  background: transparent;
}

/* 目录内容左对齐 */
.toc-left {
  text-align: left;
  display: block;
}

/* 特殊处理Linux下的滚动条 */
.linux-special-scroll-bar {
  scrollbar-width: unset !important;
}

/* 警告框行间距离 */
.small-line-numbers>p:nth-child(n) {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.small-line-numbers>p:nth-child(1) {
  display: none;
}

.small-line-numbers>p:nth-child(2) {
  margin-top: 0;
}

/* 表格行 */
table tr {
  text-align: center;
  /* 水平居中 */
  vertical-align: middle;
  /* 垂直居中 */
}

/* 表格单元格 */
table td {
  text-align: center;
  /* 水平居中 */
  vertical-align: middle;
  /* 垂直居中 */
}

/* 表格第一行加粗字体颜色恢复默认 */
.prose :where(thead th strong):not( :where([class~='not-prose'], [class~='not-prose'] *)) {
  color: unset !important;
}

/* 表格边框 */
th,
td {
  border: 1px solid gray;
}

/* 引用框上下距离 */
.prose :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

strong.text-2xl {
  color: unset !important;
}

img {
  /* display: block; */
  /* 使图片成为块级元素 */
  margin-left: auto;
  /* 左外边距设为自动 */
  margin-right: auto;
  /* 右外边距设为自动 */
}

/* 加粗字体的颜色 */
strong {
  color: rgb(59, 141, 254) !important;
}

/* 加粗斜体字体的颜色 */
/* 斜体字体的颜色 */
/* 引用块中加粗斜体字体的颜色 */
/* 引用块中斜体字体的颜色 */
/* 警告块中加粗斜体字体的颜色 */
/* 警告块中斜体字体的颜色 */
/* 使用后代选择器统一匹配所有层级的元素 */
/* 表格中加粗斜体字体的颜色 */
/* 表格中斜体字体的颜色 */
/* 任务列表第一层中加粗斜体字体的颜色 */
/* 任务列表第一层中斜体字体的颜色 */
/* 任务列表剩余层中斜体字体的颜色 */
/* 任务列表剩余层中加粗斜体字体的颜色 */
.prose>p:nth-child(n)>em:nth-child(n) strong,
.prose>p:nth-child(n)>em:nth-child(n),
.prose>blockquote:nth-child(n)>p:nth-child(n)>em:nth-child(n)>strong:nth-child(n),
.prose>blockquote:nth-child(n)>p:nth-child(n)>em:nth-child(n),
.small-line-numbers>p:nth-child(n)>em:nth-child(n)>strong:nth-child(n),
.small-line-numbers>p:nth-child(n)>em:nth-child(n),
ol li em,
ol li em strong,
ul li em,
ul li em strong,
.prose>table:nth-child(n)>tbody:nth-child(n)>tr:nth-child(n)>td:nth-child(n)>em:nth-child(n)>strong:nth-child(n),
.prose>table:nth-child(n)>tbody:nth-child(n)>tr:nth-child(n)>td:nth-child(n)>em:nth-child(n),
li.task-list-item:nth-child(n)>p:nth-child(n)>em:nth-child(n)>strong:nth-child(n),
ul.contains-task-list:nth-child(n)>li:nth-child(n)>p:nth-child(n)>em:nth-child(n),
ul.contains-task-list:nth-child(n)>li:nth-child(n)>em:nth-child(n)>strong:nth-child(n),
ul.contains-task-list:nth-child(n)>li:nth-child(n)>em:nth-child(n) {
  color: rgb(201, 77, 255) !important;
  font-family: 'Segoe UI', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif !important;
}

/* 加粗的超链接 */
strong a {
  font-weight: unset !important;
}

/* 引用块中禁止全局斜体 */
.prose>blockquote:nth-child(n) {
  font-style: normal;
}

/* resume中加粗字体颜色默认 */
div.prose-sm:nth-child(n)>p:nth-child(n)>strong:nth-child(n) {
  color: unset !important;
}

[data-active='true'] {
  @apply text-blue-500;
}

/* header的高度 */
.py-5 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* 有序列表序号 */
ol {
  list-style-type: decimal !important;
}

ul ul,
ul ol,
ol ul,
ol ol {
  list-style-type: lower-roman !important;
}

ul ul ul,
ul ul ol,
ul ol ul,
ul ol ol,
ol ul ul,
ol ul ol,
ol ol ul,
ol ol ol {
  list-style-type: lower-alpha !important;
}

ul ul ul ol,
ul ul ol ol,
ul ol ul ol,
ul ol ol ol,
ol ul ul ol,
ol ul ol ol,
ol ol ul ol,
ol ol ol ol {
  list-style-type: lower-greek !important;
}

ul.relative {
  padding-inline-start: unset !important;
  list-style-type: none !important;
}

ul.flex-1 {
  list-style-type: none !important;
}

/* 无序列表序号 */
ul {
  list-style-type: disc !important;
}

ul>li>ul>li {
  list-style-type: circle !important;
}

ul>li>ul>li>ul>li {
  list-style-type: square !important;
}

/* 为剩余所有无序列表子列表设置样式 */
ul li>ul {
  list-style-type: square !important;
}

/* 有序列表序号颜色 */
ol>li::marker {
  color: unset !important;
}

/* 无序列表序号颜色 */
ul>li::marker {
  color: unset !important;
}

div.not-prose:nth-child(n)>div:nth-child(n)>ul:nth-child(n) {
  padding-left: 18px;
}

div.not-prose:nth-child(n)>div:nth-child(n)>ol:nth-child(n) {
  padding-left: 18px;
}

ul {
  padding-inline-start: 1.625rem;
}

ol {
  padding-inline-start: 1.625rem;
}

/* 5,6级标题颜色 */
h5,
h6 {
  color: var(--tw-prose-headings);
}

/* 局部代码块样式 */
.prose :where(code):not( :where([class~='not-prose'], [class~='not-prose'] *))::before {
  content: none;
}

.prose :where(code):not( :where([class~='not-prose'], [class~='not-prose'] *))::after {
  content: none;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.thin-scrollbar {
  scrollbar-width: thin;
}

/* 警告框中超链接的样式 */
div.not-prose:nth-child(n)>div:nth-child(n)>p:nth-child(n)>a:nth-child(n),
div.not-prose:nth-child(n)>div:nth-child(n)>p:nth-child(n)>em:nth-child(n)>a:nth-child(n),
div.not-prose:nth-child(n)>div:nth-child(n)>p:nth-child(n)>strong:nth-child(n)>a:nth-child(n),
div.not-prose:nth-child(n)>div:nth-child(n)>p:nth-child(n)>em:nth-child(n)>strong:nth-child(n)>a:nth-child(n) {
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}

/* 切换字体 */
/* .col-span-3 {
  grid-row: unset !important;
} */

/* @import url('cursor.css'); */
